<template>
  <va-card class="meme-card">
    <va-image 
      :src="meme.url" 
      alt="表情包" 
      class="meme-image" 
      @click="openImageInNewTab" 
      style="cursor: pointer;" 
    />
    
    <va-card-content>
      <div class="meme-tags">
        <va-icon name="local_offer" />
        <span>{{ displayTags }}</span>
      </div>
      <div class="meme-stats">
        <div class="meme-stat">
          <va-icon name="favorite" />
          <span>{{ meme.likes }}</span>
        </div>
        <div class="meme-stat">
          <va-icon name="calendar_today" />
          <span>{{ formatDate(meme.createdAt) }}</span>
        </div>
      </div>
    </va-card-content>
    
    <va-card-actions>
      <va-button
        color="var(--color-sailing-turquoise)"
        icon="download"
        @click="downloadMeme"
      >
        下载
      </va-button>
      <!-- <va-button
        color="var(--color-sailing-lime)"
        icon="share"
        @click="shareMeme"
      >
        分享
      </va-button> -->
    </va-card-actions>
  </va-card>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  meme: {
    type: Object,
    required: true
  }
})

const displayTags = computed(() => {
  if (!props.meme.tags || props.meme.tags.length === 0) return '无标签'
  // 只显示中文标签，最多显示5个
  const chineseTags = props.meme.tags.filter(tag => /[\u4e00-\u9fa5]/.test(tag)).slice(0, 5)
  return chineseTags.join(', ') || '无标签'
})

function formatDate(dateString) {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

function downloadMeme() {
  // 获取图片URL
  const imageUrl = props.meme.url
  
  // 使用fetch获取图片数据
  fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => {
      // 创建Blob URL
      const blobUrl = window.URL.createObjectURL(blob)
      
      // 创建一个临时链接并触发下载
      const link = document.createElement('a')
      link.href = blobUrl
      link.download = props.meme.name || props.meme.title || '表情包.jpg'
      link.style.display = 'none'
      document.body.appendChild(link)
      link.click()
      
      // 清理
      setTimeout(() => {
        document.body.removeChild(link)
        window.URL.revokeObjectURL(blobUrl)
      }, 100)
    })
    .catch(error => {
      console.error('下载表情包失败:', error)
      alert('下载失败，请稍后重试')
    })
}

function shareMeme() {
  if (navigator.share) {
    navigator.share({
      title: props.meme.title || '分享表情包',
      text: '看看这个超赞的表情包！',
      url: window.location.href
    })
  } else {
    // 备用方案：复制链接到剪贴板
    navigator.clipboard.writeText(window.location.href)
      .then(() => alert('链接已复制到剪贴板！'))
      .catch(err => console.error('复制失败: ', err))
  }
}

function openImageInNewTab() {
  // 获取图片URL
  const imageUrl = props.meme.url
  
  // 在新标签页中打开图片
  window.open(imageUrl, '_blank')
}
</script>

<style scoped>
.meme-card {
  transition: transform 0.2s;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.meme-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.meme-image {
  width: 100%;
  height: 240px;
  object-fit: contain;
  background-color: var(--highlight-color);
}

.meme-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.meme-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.meme-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.sailing-primary-btn {
  background-color: var(--color-sailing-blue);
  color: white;
}

.sailing-secondary-btn {
  background-color: var(--color-sailing-turquoise);
  color: white;
}
</style> 